<template>
  <el-dialog title="编辑学员信息" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere >
    <el-form :model="formData"  ref="formData" size="mini" label-width="90px" :rules="rules">
      <el-row :gutter="30">
        <el-col><div class="title">基本信息</div></el-col>
        <el-col :span="12">
          <el-form-item label="学员姓名" prop="name">
            <el-input v-model="formData.name" placeholder="学员姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手机号码:" prop="mobile" label-width="110px">
              <template #label>
                 手机号码
                 <el-tooltip class="box-item" placement="top-start">
                   <template #content>
                     <span>此号码将作为学员端登录账号，请确认手机号填写无误.</span>
                   </template>
                   <i class="el-icon-info"></i>
                 </el-tooltip>
              </template>
              <div style="display: flex;">
            <el-select v-model="formData.mobiletag" clearable allow-create filterable placeholder="关系" style="width: 200px;">
              <el-option label="妈妈" value="妈妈"></el-option>
              <el-option label="爸爸" value="爸爸"></el-option>
              <el-option label="爷爷" value="爷爷"></el-option>
              <el-option label="奶奶" value="奶奶"></el-option>
              <el-option label="外公" value="外公"></el-option>
               <el-option label="外婆" value="外婆"></el-option>
            </el-select>
            <el-input v-model="formData.mobile" style="width:400px;" placeholder="请输入手机号码"></el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12" style="clear: both;">
          <el-form-item label="性别" >
            <el-radio-group v-model="formData.gender">
              <el-radio label="男" value="男"></el-radio>
              <el-radio label="女" value="女"></el-radio>
            </el-radio-group>
           </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="出生日期" label-width="110px">
            <el-date-picker v-model="formData.birth" value-format="yyyy-MM-dd" placeholder="出生日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="就读学校" >
            <el-input v-model="formData.school" placeholder="就读学校"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="就读年级" label-width="110px">
            <el-input v-model="formData.grade" placeholder="就读年级"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="学员来源">
            <el-input v-model="formData.source" placeholder="学员来源"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="推荐人" label-width="110px">
            <template #label>
               推荐人
               <el-tooltip class="box-item" placement="top-start">
                 <template #content>
                   <span>负责跟进学员,最终使学员报名缴费，跟进人也是消费时默认的提成人</span>
                 </template>
                 <i class="el-icon-info"></i>
               </el-tooltip>
            </template>
            <el-input v-model="formData.recommander" placeholder="推荐人"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
             <div class="title">其他信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家庭住址">
            <el-input v-model="formData.address" placeholder="家庭住址"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备用号码:" prop="mobile2" label-width="110px">
              <template #label>
                 备用号码
                 <el-tooltip class="box-item" placement="top-start">
                   <template #content>
                     <span>此号码将作为学员端登录账号，请确认手机号填写无误.</span>
                   </template>
                   <i class="el-icon-info"></i>
                 </el-tooltip>
              </template>
              <div style="display: flex;">
            <el-select v-model="formData.mobile2tag" clearable allow-create filterable style="width: 200px;">
              <el-option label="妈妈" value="妈妈"></el-option>
              <el-option label="爸爸" value="爸爸"></el-option>
              <el-option label="爷爷" value="爷爷"></el-option>
              <el-option label="奶奶" value="奶奶"></el-option>
              <el-option label="外公" value="外公"></el-option>
               <el-option label="外婆" value="外婆"></el-option>
            </el-select>
            <el-input v-model="formData.mobile" style="width:400px;" placeholder="请输入手机号码"></el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="身份证号">
            <el-input v-model="formData.idcard" placeholder="身份证号"></el-input>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="5" :maxlength="500" show-word-limit v-model="formData.memo"
              placeholder="备注"></el-input>
          </el-form-item>
        </el-col>

        <el-col style="text-align: center;">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        index:-1,
        formData: {
          name: '',
          gender:'男',
          birth:'',
          mobile:'',
          mobiletag:'',
          school:'',
          grade:'',
          source:'',
          recommander:'',
          address:'',
          mobile2:'',
          mobile2tag:'',
          memo:''
        },
        rules:{
          "name":[{message:"请正确填写学员姓名!",trigger:'blur',required:true}],
          "mobile":[{message:"请正确填写手机号码!",trigger:'blur',required:true}]
        }
      }
    },
    methods: {
      init(index,data) {
        this.index=index;
        this.formData=data;
      },
      handleCancel() {
        this.dialogVisible = false;
      },
      handleSave() {
         this.$refs.formData.validate(ok=>{
          const params = {
            stuid:this.formData.stuid,
            name: this.formData.name,
            mobiletag: this.formData.mobiletag,
            mobile: this.formData.mobile,
            gender:this.formData.gender,
            birth:this.formData.birth,
            school:this.formData.school,
            grade:this.formData.grade,
            source:this.formData.source,
            recommander:this.formData.recommander,
            address:this.formData.address,
            mobile2:this.formData.mobile2,
            mobile2tag:this.formData.mobile2tag,
            address:this.formData.address,
            idcard:this.formData.idcard,
            memo:this.formData.memo
          }
          this.api_helper.post("api/admin/educational/student/update", params).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.dialogVisible = false;
              this.$emit("complete");
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        });

      }
    }
  }
</script>

<style>
</style>
